<template>
	<view class="padding-top-xs">
		<view class="edgeInsetTop"></view>
		
		<view class="bg-white padding-bj flex">
			<view class="cu-avatar xl margin-right-bj"
				:style="{backgroundImage: 'url('+$wanlshop.oss(goods.image, 70, 70)+')'}"> </view>
			<view class="text-sm" style="width: calc(100% - 128rpx);">
				<view class="margin-bottom-xs">
					<view class="text-cut-2">
						{{goods.title}}
					</view>
				</view>
				<view class="wanl-gray">
					规格：{{goods.difference}}
				</view>
			</view>
		</view>
		
		
		

		<view class="margin-top-xs">
			<view class="cu-form-group" v-if="refund.order_type == 'groups' || refund.order_type == 'goods'">
				<view class="title">退款类型</view>
				<picker @change="typeChange" :value="refund.refund_type" :range="refundList">
					<view class="picker">
						<text v-if="refundIndex > -1">{{refundList[refund.refund_type]}}</text>
						<text class="wanl-gray-light" v-else>选择退款类型</text>
					</view>
				</picker>
			</view>

			<view class="cu-form-group">
				<view class="title">退款原因</view>
				<picker @change="reasonChange" :value="refund.reason" :range="reasonList" range-key="name">
					<view class="picker">
						<text v-if="reasonIndex > -1">{{reasonList[reasonIndex].name}}</text>
						<text class="wanl-gray-light" v-else>退款的原因</text>
					</view>
				</picker>
			</view>
			<view class="bg-white margin-top-xs" v-if="goods.goods_type !=2 && goods.goods_type !=3">
				<view class="cu-form-group">
					<view class="title">上传凭证</view>
				</view>
				<view class="grid col-4 grid-square flex-sub padding-lr">
					<view class="bg-img" v-for="(item, index) in refund.images" :key="index" @tap="viewImage(index)">
						<image :src="$wanlshop.oss(item, 90, 90)" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="delImg(index)"><text class="wlIcon-31guanbi"></text>
						</view>
					</view>
					<view style="border: 1px dashed #ddd;" @tap="chooseImage" v-if="refund.images.length < 4">
						<text class="wlIcon-31paishe"></text>
					</view>
				</view>
			</view>
			<!-- <view class="cu-form-group margin-top-xs" v-if="refund.refund_type == 1 || refund.refund_type == 2">
				<view class="title">物流单号</view>
				<input placeholder="请填写物流单号" v-model="refund.logistic_no"></input>
			</view> -->
			<view class="cu-form-group margin-top-xs">
				<view class="title">退款备注</view>
				<input placeholder="请填写退款备注" v-model="refund.remark"></input>
			</view>
		</view>

		<view class="order margin-top-sm bg-white padding-bj margin-bottom-sm" v-if="address">
			<view class="text-sm">
				<!-- <view class="title margin-bottom-xs">
					<view class="text-30">退款地址</view>
				</view> -->
				<view class="item flex align-start">
					<text class="text-30">退款地址：</text>
					<view class="text-30">
						<view class=""> {{address.name}} {{address.phone}}</view>
						<view class=""> {{address.address}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="edgeInsetBottom"> </view>
		<view class="wanlian cu-bar tabbar foot flex flex-direction">
			<button class="cu-btn bg-green lg" @tap="addData">提交</button>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				goods: {},
				refundList: ['仅退款', '仅退货', '退货退款'],
				reasonList: [],
				// 退款
				reasonIndex: -1,
				refundIndex: -1,
				refund: {
					order_id: 0,
					order_type: 'goods',
					reason: -1, // 选择的为数字（字典值）
					remark: '', // 退款备注
					images: [],
					reason_type: 1,
					refund_type: -1,
					goods_id:''
					// logistic_no:''
				},
				address: null
			};
		},
		onLoad(option) {
			let data = JSON.parse(option.data);
			this.goods = data.goods;
			console.log(data)
			this.refund.order_id = data.order_id;
			this.refund.goods_id = data.goods.goods_id;
			this.refund.product_id = data.goods.goods_id;
			this.refund.order_type = data.order_type;
			if (data.source_id) {
				this.refund.source_id = data.source_id;
			}
			//获取退款原因列表
			this.getKeyvalue()
			if (data.shop_id) {
				this.getAddress(data.shop_id)
			}
		},
		methods: {
			async getAddress(shop_id) {
				await uni.request({
					url: '/payment/refund/address',
					method: 'POST',
					data: {
						shop_id: shop_id
					},
					success: res => {
						this.address = res.data.return
					}
				});
			},
			async addData() {
				
				let type = this.refund.order_type;
				if (this.refund.refund_type == -1 && (this.refund.order_type == 'goods' || this.refund.order_type ==
						'groups')) {
					return this.$wanlshop.msg('请选择退款类型');
				}
				if (this.refund.reason == -1) {
					return this.$wanlshop.msg('请选择退款原因');
				}
				if(this.goods.goods_type !=2 && this.goods.goods_type !=3){
				if (this.refund.images.length == 0) {
					return this.$wanlshop.msg('请上传图片');
				}
					
				}
				if (!this.refund.remark) {
					return this.$wanlshop.msg('请填写退款备注');
				}
				// if((this.refund.refund_type == 1 || this.refund.refund_type == 2) && !this.refund.logistic_no && (this.refund.order_type == 'goods' || this.refund.order_type == 'groups')) {
				// 	return this.$wanlshop.msg('请填写物流单号');
				// }
				
				
				
				
				// goods_id: 44
				// images: Array(0)
				// order_id: 44
				// order_type: "internethospital"
				// product_id: 44
				// reason: -1
				// reason_type: 1
				// refund_type: -1
				// remark: ""
				
				let refund = JSON.parse(JSON.stringify(this.refund));
				refund.images = refund.images.join(',');
				if (this.refund.order_type == 'goods' || this.refund.order_type == 'groups') {
					refund.refund_type += 1;
				} else {
					refund.refund_type = 1
				}
				// 提交
				let url = '';
				switch (type){
					case 'homeking':
						url = '/addons/homeking/api.refund/add'
						break;
					case 'nursing':
						url = '/addons/nursing/api.refund/add'
						break;
					case 'medicalvisit':
						url = '/addons/medicalvisit/api.Refund/add'
						break;
					case 'accompany':
						url = '/addons/accompany/api.Refund/apply'
						break;
					case 'internethospital':
						url = '/addons/internethospital/api.Refund/add'
						break;
					default:
						break;
				}
				await uni.request({
					url: url,
					method: 'POST',
					data: refund,
					success: res => {
						this.$wanlshop.msg(res.msg)
						// 跳转到退款详情页
						setTimeout(() => {
							this.$wanlshop.to(
								`/pages/user/order/refund?s=${this.refund.order_type}`);
						}, 2000);
						// setTimeout(() => {
						// 	uni.reLaunch({
						// 		url:`/pages/user/order/refund?s=${this.refund.order_type}`
						// 	})
						// }, 1000);
					}
				});
			},
			//获取退款原因列表
			async getKeyvalue() {
				let type = this.refund.order_type;
				if(type == 'medicalvisit') {
					await uni.request({
						url: '/addons/medicalvisit/api.Refund/getReasonList',
						method: 'POST',
						success: res => {
							let temp = []
							for (let var1 in res.data) {
								temp.push({
									id:var1,
									name:res.data[var1]
								})
							}
							this.reasonList = temp;
						}
					});
				} else if(type == 'accompany') {
					await uni.request({
						url: '/addons/accompany/api.Refund/getReasonList',
						method: 'POST',
						success: res => {
							let temp = []
							for (let var1 in res.data) {
								temp.push({
									id:var1,
									name:res.data[var1]
								})
							}
							this.reasonList = temp;
						}
					});
				}  else if(type == 'nursing') {
					await uni.request({
						url: '/addons/nursing/api.Refund/getReasonList ',
						method: 'POST',
						success: res => {
							let temp = []
							for (let var1 in res.data) {
								temp.push({
									id:var1,
									name:res.data[var1]
								})
							}
							this.reasonList = temp;
						}
					});
				}else if(type == 'internethospital') {
					await uni.request({
						url: '/addons/internethospital/api.Refund/getReasonList',
						method: 'POST',
						success: res => {
							let temp = []
							for (let var1 in res.data) {
								temp.push({
									id:var1,
									name:res.data[var1]
								})
							}
							this.reasonList = temp;
						}
					});
				} else {
					await uni.request({
						url: '/publics/commons/datadictArrays',
						method: 'POST',
						data: {
							datadict_id: 12
						},
						success: res => {
							this.reasonList = res.data[0].item
						}
					});
				}

			},
			chooseImage(index) {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: res => {
						uni.request({
							url: '/wanlshop/common/uploadData',
							success: updata => {
								for (let i = 0; i < res.tempFilePaths.length; i++) {
									// 读取图片宽高
									uni.getImageInfo({
										src: res.tempFilePaths[i],
										success: image => {
											uni.uploadFile({
												url: updata.data.uploadurl,
												filePath: image.path,
												name: 'file',
												formData: updata.data
													.storage == 'local' ?
													null : updata.data
													.multipart,
												success: data => {
													this.refund.images
														.push(JSON.parse(
																data.data)
															.data.fullurl);
												},
												fail: error => {
													this.$wanlshop.msg(JSON
														.parse(error
															.data).msg);
												}
											});
										}
									});
								}
							}
						});
					}
				});
			},
			reasonChange(e) {
				this.reasonIndex = e.detail.value
				this.refund.reason = this.reasonList[e.detail.value].id
			},
			typeChange(e) {
				this.refundIndex = e.detail.value
				this.refund.refund_type = e.detail.value
			},
			viewImage(key) {
				uni.previewImage({
					urls: this.refund.images,
					current: this.refund.images[key]
				});
			},
			delImg(key) {
				this.refund.images.splice(key, 1);
			}
		}
	};
</script>

<style lang="less">
	page {
		background-color: #EDEDED;
	}

	.dashed::after {
		border: 1px dashed #666;
	}

	.wanlian.cu-bar.tabbar {
		background-color: transparent !important;
	}

	.wanlian {

		.cu-btn {
			width: 434rpx;
			height: 72rpx;
			background: #4CBD66;
			border-radius: 6rpx;
		}
	}
</style>